<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="编辑地址"
        @click-left="back"
        left-arrow
      ></van-nav-bar>
    </header>
    <div class="main">
      <van-field v-model="addressName" label="收货人" />
      <van-field v-model="addressTel" type="tel" label="手机号" />
      <van-field label="所在地区" v-model="addressArea" readonly right-icon="arrow" @click="showAction" />
      <van-field v-model="addressDetail" label="详细地址" />
      <van-cell center title="设为默认地址">
        <template #right-icon>
          <van-switch v-model="isDefault" size="24" @change="onDefault" />
        </template>
      </van-cell>
    </div>
    <van-action-sheet v-model="show" class="actionAddress">
      <van-area :area-list="areaList" @confirm="onConfirm" @cancel="onCancel" />
    </van-action-sheet>
    <div class="footer_btn">
      <button @click="updataAddress">保存</button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Field, Toast, Switch, Cell, NavBar, ActionSheet, Area } from 'vant'
import areaList from '@/utils/area'
import { getAddressData, updataAddress } from '@/api'
Vue.use(Toast)
Vue.use(Field)
Vue.use(Switch)
Vue.use(Cell)
Vue.use(NavBar)
Vue.use(ActionSheet)
Vue.use(Area)
export default {
  data () {
    return {
      areaList,
      addressid: '',
      addressName: '',
      addressTel: '',
      addressArea: '',
      addressDetail: '',
      isDefault: false,
      show: false,
      province: '',
      city: '',
      county: ''
    }
  },
  mounted () {
    const index = this.$route.query.index
    getAddressData({
      userid: localStorage.getItem('userid'),
      token: localStorage.getItem('token')
    }).then(res => {
      if (res.data.message === 'token验证失败') {
        Toast('您登录的用户信息已过期,请重新登录')
        localStorage.clear()
        setTimeout(() => {
          this.$router.replace('/login')
        }, 1000)
      } else {
        this.addressid = res.data.data[index].addressid
        this.addressName = res.data.data[index].name
        this.addressTel = res.data.data[index].tel
        this.addressArea = res.data.data[index].province + res.data.data[index].city + res.data.data[index].county
        this.addressDetail = res.data.data[index].addressDetail
      }
    })
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    showAction () {
      this.show = true
    },
    onConfirm (val) {
      this.addressArea = val[0].name + val[1].name + val[2].name
      this.province = val[0].name
      this.city = val[1].name
      this.county = val[2].name
      this.show = false
    },
    onCancel () {
      this.show = false
    },
    onDefault (value) {
      // console.log(value)
      // console.log(this.isDefault)
    },
    updataAddress () {
      updataAddress({
        userid: localStorage.getItem('userid'),
        addressid: this.addressid,
        isDefault: this.isDefault ? '1' : '0',
        name: this.addressName,
        tel: this.addressTel,
        province: this.province,
        city: this.city,
        county: this.county,
        addressDetail: this.addressDetail
      }).then(res => {
        // console.log(res)
        this.$router.replace('/address')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: auto;
  padding: 0 0.15rem;
}
.actionAddress {
  width: 100%;
  height: 2.65rem;
}
.footer_btn {
  width: 100%;
  height: 0.47rem;
  margin-bottom: 0.20rem;
  padding: 0 0.15rem;
  position: fixed;
  bottom: 0;
  z-index: 100;
  button {
    background: linear-gradient(#ff6742, #ff6742),linear-gradient(#ffde00, #ffde00);
    height: 0.47rem;
    line-height: 0.47rem;
    width: 100%;
    border: none;
    color: white;
    font-size: 0.18rem;
    border-radius: 0.26rem;
  }
}
/deep/ .van-icon-arrow-left {
  font-size: 0.2rem;
  color: #666666;
}
/deep/ .van-hairline--bottom {
  border-bottom: 1px solid #ebebeb;
}
/deep/ .van-field__control {
  width: 100%;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
/deep/ .van-field {
  width: 100%;
  height: 0.66rem;
  padding: 0;
  line-height: 0.66rem;
  border-bottom: 1px solid #ebebeb;
  color: #232323;
  font-size: 0.16rem;
}
/deep/ .van-cell--center {
  width: 100%;
  height: 0.66rem;
  padding: 0;
  line-height: 0.66rem;
  border-bottom: 1px solid #ebebeb;
  color: #232323;
  font-size: 0.16rem;
}
</style>
